<script setup>
import { defineComponent,ref,watch,onMounted,defineProps} from 'vue';
import newsApi from '@/api/newsApi';
import Card from '@/components/Card.vue';
const newsList=ref([]);//定义newsList
//传入数据
const props=defineProps({
    subName:{
        type:String,
        required:true
    }
})

//监听subName prop的变化
watch(()=>props.subName,async( newSubName )=> {
    await fetchData(newSubName);
})
//拉取newList数据
const fetchData = async (subName) => {
  try {
    const res = await newsApi.newsList('jiaowu',subName,20, 1);
    newsList.value = res.data.newsList;  // 将数据赋值给 newsList
    console.log(newsList.value);  // 可以在控制台查看数据
  } catch (error) {
    console.error('Error fetching news:', error);
  }
}
onMounted(()=>{
    fetchData(props.subName)//组件挂载时获取数据
})
defineComponent({
    components:{
        Card
    }
})
</script>

<template>
<Card :newsList="newsList"></Card>
</template>


<style>

</style>